<template>
	<view class="content">
		<!-- 用户名头像等信息 -->
		<view class="info-view shadow-light fadeIn-1s">
			<uni-row>
				<uni-col :span="7">
					<view class="info-view-col-1">
						<view class="info-avatar-view">
							<image class="info-avatar" :src="(user != [] && (user.avatar == undefined 
								|| user.avatar == '')) ? '/static/images/hei.png' : user.avatar" 
								@tap="onAvatarTap" mode="aspectFill"></image>
						</view>
					</view>
				</uni-col>
				<uni-col :span="17">
					<view class="info-view-col-2">
						<view class="username-view">
							<text class="username">
								{{ user.username }}
								<text class="iconfont" style="margin-left: 10rpx;"
									:class="user.gender === '女' ? 'color-red' : 'color-blue'">&#xe6ef;</text>
							</text>
							<text class="schoolName" v-if="user.schoolName != undefined && user.schoolName != ''">
								{{ user.schoolName }}
							</text>
						</view>
<!-- 						<view class="schoolName-view" v-if="user.schoolName != undefined && user.schoolName != ''">
							<text class="schoolName">{{ user.schoolName }}</text>
						</view> -->
						<view class="profile-view">
							<u--text class="profile" type="info" size="14"
								:text="(user.profile === '' ? '此用户未填写简介' : user.profile)" lines="2"></u--text>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<!-- 关注和粉丝等信息 -->
		<view class="follow-view shadow-light fadeIn-1s">
			<uni-row>
				<uni-col :span="isMe ? 12 : 8">
					<view class="follow-block">
						关注：{{ user.follows }}
					</view>
				</uni-col>
				<uni-col :span="isMe ? 12 : 8">
					<view class="follow-block" style="border-right:none;">
						粉丝：{{ user.fans }}
					</view>
				</uni-col>
				<uni-col :span="8" v-if="!isMe">
					<view class="follow-button-block iconfont" @tap="onFollowTap"
						:class="isFollow ? 'bcerror' : 'bcprimary'">
						{{ isFollow ? "&#xe75e;取消关注" : "&#xe8a1;关注"}}
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<!-- 用户发布的嘿文 -->
		<view class="heis-view fadeIn-1s">
			<view class="heis-empty-view" v-if="heis.length == 0">
				<u-empty mode="data" class="empty-view shadow-light"
					icon="http://cdn.uviewui.com/uview/empty/data.png" 
					:text="(user.username == undefined ? '' : user.username) + '未发布过嘿文'">
				</u-empty>
			</view>
			
			<view class="heis-content">
				<view class="hei-view shadow zoomIn-d3s" v-for="(hei, i) in heis" :key="i" @tap="onHeiTap(hei.heiId, i)">
					<view class="hei-image-view" v-if="hei.images != undefined && hei.images.length >= 1">
						<image class="hei-image" :src="hei.images[0].src" mode="aspectFill"></image>
					</view>
					<view class="hei-content-view">
						<view class="hei-content-text">{{ hei.content }}</view>
					</view>
					<view class="hei-title-view">
						<image class="hei-avatar" mode="aspectFill"
							:src="(hei.avatar == undefined || hei.avatar == '') ? '/static/images/hei.png' : hei.avatar"></image>
						<text class="hei-title">{{ hei.username }}</text>
						<view class="hei-like-view">
							<text class="iconfont hei-like">&#xe8a8;</text>
							<text class="hei-like-number">{{ hei.likes }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		isFollow,
		addFollow,
		deleteFollow
	} from "@/network/UserApi.js";
	
	import {
		getHeiByEmail
	} from "@/network/HeiApi.js";
	export default {
		data() {
			return {
				email: "",
				user: [],
				heis: [],
				
				// 标明当前是否是查看自己的资料
				isMe: false,
				isFollow: false,
			}
		},
		
		onLoad(options) {
			this.email = options.email == undefined ? "" : options.email;
			if (this.email == this.getData("email")) {
				// 当前是查看自己的资料
				this.isMe = true;
			}
			this.refreshData();
			this.refreshIsFollow();
			this.refreshHei();
		},
		
		methods: {
			/**
			 * 获取用户数据
			 */
			refreshData: function() {
				getInfo(this.email).then(data => {
					console.log(data.content);
					this.user = data.content;
					uni.setNavigationBarTitle({
						title: this.user.username
					});
				}).catch(err => {
					uni.showModal({
						title: "获取用户信息失败",
						content: err
					});
				});
			},
			
			/**
			 * 判断是否关注了当前用户
			 */
			refreshIsFollow: function() {
				isFollow(this.email).then(data => {
					this.isFollow = data.content.isFollow;
				});
			},
			
			/**
			 * 获取当前用户发布的嘿文
			 */
			refreshHei: function() {
				getHeiByEmail(this.email).then(data => {
					this.heis = data.content;
				});
			},
			
			/**
			 * 头像单击事件，预览头像
			 */
			onAvatarTap: function() {
				if (this.user != [] && this.user.avatar != "") {
					uni.previewImage({
						urls: [this.user.avatar],
						current: 0
					});
				}
			},
			
			/**
			 * 关注按钮点击事件
			 */
			onFollowTap: function() {
				let that = this;
				if (this.isFollow) {
					// 取消关注
					deleteFollow(this.email).then(data => {
						this.isFollow = false;
						this.user.fans = Number(this.user.fans) - 1;
					}).catch(err => {
						uni.showModal({
							title: "取消关注失败",
							content: err
						});
					})
				} else {
					// 添加关注
					addFollow(this.email).then(data => {
						this.isFollow = true;
						this.user.fans = Number(this.user.fans) + 1;
					}).catch(err => {
						uni.showModal({
							title: "添加关注失败",
							content: err
						});
					})
				}
			},
			
			/**
			 * 嘿文点击事件
			 * @param {Object} heiId
			 */
			onHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/hei/hei?heiId=" + heiId + "&fromUserPage=true"
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
	}
	
	.info-view {
		background-color: white;
		border-radius: 20px;
	}
	
	.info-view-col-1 {
		position: relative;
		width: 220rpx;
		height: 216rpx;
	}
	
	.info-avatar-view {
		margin-top: 2rpx;
		position: relative;
	}
	
	.info-avatar {
		width: 180rpx;
		height: 180rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 10 rpx;
		border-radius: 18px;
	}
	
	.info-view-col-2 {
		margin-left: 20rpx;
	}
	
	.username-view {
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	
	.username {
		font-size: 34rpx;
		font-weight: bold;
	}
	
	.schoolName {
		background-color: $u-primary;
		font-size: 24rpx;
		vertical-align: top;
		color: white;
		padding: 5rpx;
		border-radius: 5px;
		font-size: 24rpx;
		margin-left: 20rpx;
	}
	
	.profile-view {
		margin-top: 10rpx;
	}
	
	.info-view-col-3 {
		border-radius: 0px 20px 20px 0px;
		height: 220rpx;
		line-height: 220rpx;
		text-align: center;
		transition: ease-out all .3s;
	}
	
	.info-view-col-3:active {
		background-color: $u-info-light
	}
	
	.info-view-col-3 text {
		font-size: 44rpx;
		color: $u-info-disabled;
	}
	
	.color-blue {
		color: $u-primary;
	}
	
	.color-red {
		color: $u-error;
	}
	
	.follow-view {
		border-radius: 20px;
		background-color: white;
		margin-top: 20rpx;
		text-align: center;
		overflow: hidden;
	}
	
	.follow-block {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: var(--contentColor);
		font-size: 28rpx;
		border-right: 1px solid var(--divideColor);
	}
	
	.follow-button-block {
		margin-top: 10rpx;
		margin-right: 10rpx;
		border-radius: 20px;
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.heis-view {
	}
	
	.heis-empty-view {
		margin-top: 20rpx;
	}
	
	.empty-view {
		background-color: white;
		border-radius: 20px;
		padding-bottom: 40rpx;
	}
	
	.heis-content {
		// padding-left: 20rpx;
		column-count: 2;
		column-gap: 0;
		text-align: center;
	}
	
	.hei-view {
		background-color: white;
		border-radius: 20px;
		margin: 20rpx;
		margin-left: 10rpx;
		margin-bottom: 0rpx;
		width: 95%;
		display: inline-block;
		transition: ease-out all .3s;
		vertical-align: bottom;
		overflow: hidden;
	}
	
	.hei-view:active {
		background-color: $u-info-light;
	}
	
	.hei-title-view {
		padding: 20rpx;
		padding-top: 0rpx;
		padding-bottom: 24rpx;
		height: 38rpx;
		line-height: 38rpx;
		border-radius: 20px 20px 0px 0px;
		position: relative;
		text-align: left;
	}
	
	.hei-like-view {
		float: right;
		margin-left: 20rpx;
		color: var(--contentColor);
		position: relative;
	}
	
	.hei-like {
		font-size: 34rpx;
		position: relative;
		top: 2rpx;
	}
	
	.hei-like-number {
		font-size: 24rpx;
		margin-left: 4rpx;
		position: relative;
		top: -2rpx;
	}
	
	.hei-avatar {
		width: 38rpx;
		height: 38rpx;
		border-radius: 999px;
		vertical-align: bottom;
		background-color: $u-primary;
	}
	
	.hei-title {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: var(--contentColor);
	}
	
	.hei-image-view {
	}
	
	.hei-image {
		height: 260rpx;
		width: 100%;
	}
	
	.hei-content-view {
		padding: 20rpx;
		padding-bottom: 10rpx;
		padding-top: 0rpx;
		text-align: left;
	}
	
	.hei-content-text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: var(--titleColor);
		font-size: 26rpx;
	}
</style>
